<template>
	<view class="main animated fadeIn faster">
		<view class="content position-fixed z-index-100" :style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="title">
				<view class="goback" @click="goback">
					<!-- <image src="../../static/组 2457.png"></image> -->
				</view>
				<text>我的礼物</text>
			</view>
		</view>
		<view class="gifts">
			<view class="received">收到的礼物</view>
			<view class="sendOut current">送出的礼物</view>
		</view>
		<view class="Menulist">
			<view class="lately current">近90天</view>
			<view class="all">全部</view>
		</view>
		<view class="giftList">
			<view class="item" v-for="i in 20" :key="i.id">
				<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/20241111160119.png"></image>
				<view class="giftName">礼物</view>
				<view class="quantity">×2</view>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				ctype:0,
			}
		},
		methods: {
			changType(type){
				this.ctype = type
			},
			goback() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.gifts {
		width: 100%;
		height: 150rpx;
		margin-top: 180rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9B9B9B;
		font-size: 34rpx;
		align-content: flex-start;
		.received,.sendOut {
			padding: 10rpx 18rpx;
			border-radius: 20px;
			margin-right: 20rpx;
		}
		.current {
			background: linear-gradient(to right, #EC69CF, #60AFFE);
			margin-left: 20rpx;
			color: #fff;
		}
	}
	.Menulist {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		color: #413736;
		font-size: 32rpx;
		margin: 0 0 20rpx 40rpx;
		.lately {
			margin-right: 40rpx;
		}
		.current {
			padding: 12rpx 18rpx;
			border-radius: 20px;
			background-color: #59DFAA;
		}
	}
	.giftList {
		width: 660rpx;
		margin: 0 auto;
		padding-bottom: 150rpx;
		margin-bottom: 30px;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		.item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			image {
				width: 80px;
				height: 80px;
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
